<ng-template>
  <div class="apes-select-dropdown apes-select-dropdown--single apes-select-dropdown-placement-bottomLeft"
       #panel
       [@.disabled]="noAnimation?.apesNoAnimation"
       [apesNoAnimation]="noAnimation?.apesNoAnimation"
       [@slideMotion]="dropDownPosition"
       [class.apes-select-dropdown-hidden]="!showPanel" [ngClass]="apesOverlayClassName" [ngStyle]="apesOverlayStyle">
    <div style="overflow: auto;">
      <ul class="apes-select-dropdown-menu  apes-select-dropdown-menu-root apes-select-dropdown-menu-vertical"
          role="menu"
          aria-activedescendant>
        <ng-template *ngTemplateOutlet="apesDataSource ? optionsTemplate : contentTemplate"></ng-template>
      </ul>
    </div>
  </div>
  <ng-template #contentTemplate>
    <ng-content></ng-content>
  </ng-template>
  <ng-template #optionsTemplate>
    <apes-auto-option *ngFor="let option of apesDataSource" [apesValue]="option">{{option}}</apes-auto-option>
  </ng-template>
</ng-template>
